// eslint-disable
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view
    class="bg-white overflow-hidden pt-2 px-4"
    :style="{ marginTop: safeAreaInsets?.top + 'rpx' }"
  >
    <view class="">
      <view>
        <up-search shape="square" :showAction="false" :style="{ marginTop: '14rpx' }"></up-search>
      </view>
      <up-tabs
        @change="tabChange"
        :list="tabList"
        lineWidth="30rpx"
        lineHeight="5rpx"
        :lineColor="`#E73828 100% 100%`"
        :activeStyle="{
          color: '#333333',
          transform: 'scale(1.25)',
          fontWeight: 'bold',
        }"
        :itemStyle="{
          color: '#666666',
          fontSize: '24rpx',
          lineHeight: '28rpx',
          paddingBottom: '20rpx',
          paddingTop: '24rpx',
          fontFamily: 'PingFang SC',
        }"
      ></up-tabs>
    </view>
    <follow class="component" v-if="componentName == 'follow'"></follow>
    <recommend class="component" v-if="componentName == 'recommend'"></recommend>
    <local class="component" v-if="componentName == 'local'"></local>
    <task class="component" v-if="componentName == 'task'"></task>
  </view>
</template>
<script lang="ts">
import follow from '@/components/follow.vue'
import recommend from '@/components/recommend.vue'
import local from '@/components/local.vue'
import task from '@/components/task.vue'
import { reactive, ref } from 'vue'
export default {
  components: {
    follow,
    recommend,
    local,
    task,
  },
  data() {
    return {
      tabList: [
        { name: '关注', key: 'follow' },
        { name: '推荐', key: 'recommend' },
        { name: '本地', key: 'local' },
        { name: '任务', key: 'task' },
      ],
      componentName: 'follow',
      safeAreaInsets: uni.getSystemInfoSync().safeAreaInsets,
    }
  },
  methods: {
    tabChange(tabItem) {
      this.componentName = tabItem.key
    },
  },
  setup() {
    // defineOptions({
    //   name: 'Home',
    // })
    // // 获取屏幕边界到安全区域距离
    // const { safeAreaInsets } = uni.getSystemInfoSync()

    onLoad(() => {})
  },
}
</script>
<style scoped lang="scss">
.box {
  display: flex;
  flex-direction: column;
  .component {
    flex: 1;
  }
}
</style>
